<template>
  <div>
    <Header></Header> <!-- 子页面公共头部 -->
    <div class="w1200">
      <Crumbs :lmtitle="lmtitle"></Crumbs>
      <div style="clear: both;"></div>
      <div class="tongji-con bartitle">
          <span>大队投稿统计</span>
          <el-date-picker
            v-model="tjyf"
            value-format="yyyy"
            format="yyyy"
            type="year"
            @change="shaixuan"
            placeholder="选择年份"
          >
          </el-date-picker>
        </div>

        <div id="tjxx" :style="{ width: '100%', height: '180px' }"></div>
        <div class="tongji-con bartitle">
          <span> 上稿率</span>
          <el-date-picker
            v-model="tjyf3"
            value-format="yyyy"
            format="yyyy"
            type="year"
            @change="shaixuan3"
            placeholder="选择年份"
          >
          </el-date-picker>
        </div>
        <div id="tjxx3" :style="{ width: '100%', height: '180px' }"></div>
        <div class="tongji-con bartitle">
          <span>投稿达人榜</span>
          <el-date-picker
            v-model="tjyf2"
            value-format="yyyy"
            format="yyyy"
            type="year"
            @change="shaixuan2"
            placeholder="选择年份"
          >
          </el-date-picker>
        </div>
        <div id="tjxx2" :style="{ width: '100%', height: '180px' }"></div>

    </div>
    <Foot></Foot> <!-- 网站公共底部 -->
  </div>
</template>
<script>
import Cookies from "js-cookie";
import Foot from "@/components/foot.vue";
import Crumbs from "@/components/crumbs.vue";
import { statistics4,statistics5,statistics3  } from "@/api/article";
import Header from "@/components/header.vue";
import echarts from "echarts";
export default {
  name: "articlecontent",
  components: {
    Header,
    Crumbs,
    Foot
  },
  data() {
    return {
      dhData:[],
      lmtitle:'统计',
      tjyf:'',
      tjyf2:'',
      tjyf3:'',
      obj:{
        xdata:[],
        ydata1:[],
        ydata2:[]
      },
      obj2:{
        xdata:[],
        ydata:[]
      },
      obj3:{
        xdata:[],
        ydata:[]
      }
    };
  },
  created() {
    this.dhData = JSON.parse(Cookies.get('navdata'))[this.$route.query.navId]
    this.getdata1(this.getCurrentTime())
    this.getdata2(this.getCurrentTime())
    this.getdata3(this.getCurrentTime())
  },
  watch: {
    obj: {
      handler: function (val) {
        this.obj = val;
        this.$nextTick(() => {
          this.initCharts();
        });
      },
      deep: true,
      immediate: true,
    },
    obj2: {
      handler: function (val) {
        this.obj2 = val;
        this.$nextTick(() => {
          this.initCharts2();
        });
      },
      deep: true,
      immediate: true,
    },
    obj3: {
      handler: function (val) {
        this.obj3 = val;
        this.$nextTick(() => {
          this.initCharts3();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getCurrentTime() {
      let yy = new Date().getFullYear();
      return yy
    },
    shaixuan(e) {
      if (e) {
        this.getdata1(e);
      } else {
        this.getdata1(this.getCurrentTime());
      }
    },
    shaixuan2(e) {
      if (e) {
        this.getdata2(e);
      } else {
        this.getdata2(this.getCurrentTime());
      }
    },
    shaixuan3(e) {
      if (e) {
        this.getdata3(e);
      } else {
        this.getdata3(this.getCurrentTime());
      }
    },
    initCharts() {
      var chartDom = document.getElementById("tjxx");
      let myChart = echarts.init(chartDom);
      myChart.setOption({
        legend: {
          show:true,
          data: ['投稿数量', '已通过文章数'],
          left:0,
        },
        grid: {
          left: 0,
          top: 30,
          right: 20,
          bottom: 30,
        },
        xAxis: {
          type: "category",
          data: this.obj.xdata,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval:0,
            textStyle: {
              color: "#000",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#047adb",
              width: 2,
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#047adb",
              width: 2,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#000",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name:'投稿数量',
            data: this.obj.ydata1,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#047adb",
            },
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "#047adb",
                label: {
                  show: true,
                  fontSize: 14,
                  marginTop: 15,
                  position: "top",
                  color: "#000",
                },
              },
            },
          },
          {
            name:'已通过文章数',
            data: this.obj.ydata2,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#91cc75",
            },
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "#91cc75",
                label: {
                  show: true,
                  fontSize: 14,
                  marginTop: 15,
                  position: "top",
                  color: "#000",
                },
              },
            },
          },
        ],
      });
    },
    getdata1(date) { //  大队投稿统计
      /*this.obj.xdata = []
      this.obj.ydata = []*/
      this.obj.ydata1 = []
      this.obj.xdata = []
      this.obj.ydata2 = []
      statistics4({ year: date }).then((res) => {
        // console.log("🚀 ~ file: bar.vue:230 ~ statistics4 ~ res", res)
        res.data.statistics1.map((item) => { // 全部投稿
                      this.obj.ydata1.push(item.num)
                      this.obj.xdata.push(item.name)
        });
        res.data.statistics2.map((item) => { // 已通过
                      this.obj.ydata2.push(item.num)
        });
      });
    },
    initCharts2() {
      var chartDom = document.getElementById("tjxx2");
      let myChart = echarts.init(chartDom);
      myChart.setOption({
        grid: {
          left: 0,
          top: 20,
          right: 20,
          bottom: 30,
        },
        xAxis: {
          type: "category",
          data: this.obj2.xdata,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval:0,
            textStyle: {
              color: "#000",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#047adb",
              width: 2,
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#047adb",
              width: 2,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#000",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: this.obj2.ydata,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#047adb",
            },
            barWidth: 36,
            itemStyle: {
              normal: {
                color: "#047adb",
                label: {
                  show: true,
                  fontSize: 14,
                  marginTop: 15,
                  position: "top",
                  color: "#000",
                },
              },
            },
          },
        ],
      });
    },
    isIncludeContent(name){ // 内容是否包含领导信箱
      // 领导列表 不能出现在统计中
      let leaderList = ['张建军','于显峰','徐岩','宫伟','张录文','申劲松','赵玉辉','王秋丽','刘彩赟','通讯录作者'];
      for(let i=0;i <leaderList.length;i++){
        if(name.indexOf(leaderList[i])!=-1){
          return true; // 存在
        }
      }
      return false;//不存在
    },
    getdata2(date) {
      console.log("投稿达人榜",date)
      this.obj2.xdata = []
      this.obj2.ydata = []
      // 领导列表 不能出现在统计中
      statistics5({ year: date }).then((res) => {
        res.data.map((item) => {
          if(item.name && ! this.isIncludeContent(item.name)){ // 不存在在列表中
            this.obj2.xdata.push(item.name)
            this.obj2.ydata.push(item.num)
          }
        });
      });
    },

    initCharts3() {
      var chartDom = document.getElementById("tjxx3");
      let myChart = echarts.init(chartDom);
      myChart.setOption({
        grid: {
          left: 0,
          top: 20,
          right: 20,
          bottom: 30,
        },
        xAxis: {
          type: "category",
          data: this.obj3.xdata,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval:0,
            textStyle: {
              color: "#000",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#047adb",
              width: 2,
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#047adb",
              width: 2,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#000",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: this.obj3.ydata,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "#047adb",
            },
            barWidth: 36,
            itemStyle: {
              normal: {
                color: "#047adb",
                label: {
                  show: true,
                  fontSize: 14,
                  marginTop: 15,
                  position: "top",
                  color: "#000",
                },
              },
            },
          },
        ],
      });
    },
    getdata3(date) {
      this.obj3.xdata = []
      this.obj3.ydata = []
      statistics3({ year: date }).then((res) => {
        console.log("🚀 ~ file: bar.vue ~ line 141 ~ statistics1 ~ res", res)
        res.data.map((item) => {
          this.obj3.xdata.push(item.name)
          this.obj3.ydata.push(item.num.replace("%",""))
        });
      });
    },
  },
};
</script>
<style>
  @import "../assets/css/font/iconfont.css";
  @import "../assets/css/index.css";
  @import "../assets/css/style.css";
  </style>
